<template>
    <div class="common-layout">
        <el-container>
            <!-- 侧边栏 -->
            <el-aside style="width: auto;">
                <div class="aside_left">
                    <el-col :span="12">
                        <el-menu default-active="1" router class="el-menu-vertical-demo" :default-openeds="arr"
                            :collapse="isnull">
                            <el-sub-menu index="1">
                                <template #title>
                                    <el-icon>
                                        <ChatSquare />
                                    </el-icon>
                                    <span>通知管理</span>
                                </template>
                                <el-menu-item index="1-1" route="/home/homeschool/notificationlist">通知列表</el-menu-item>
                                <el-menu-item index="1-2" route="/home/homeschool/notificationtype">通知类型管理</el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="2">
                                <template #title>
                                    <el-icon>
                                        <Promotion />
                                    </el-icon>
                                    <span>学生请假</span>
                                </template>
                                <el-menu-item index="2-1" route="/home/homeschool/studentLeavelist">
                                    学生请假列表</el-menu-item>
                                <el-menu-item index="2-2" route="/home/homeschool/leavereview">学生请假审核</el-menu-item>
                                <el-menu-item index="2-3" route="/home/homeschool/leaverecord">请假记录</el-menu-item>
                                <!-- <el-menu-item index="2-4" route="/home/homeschool/leaversetting">请假设置</el-menu-item> -->

                            </el-sub-menu>
                            <el-sub-menu index="3">
                                <template #title>
                                    <el-icon>
                                        <PictureFilled />
                                    </el-icon>
                                    <span>相册管理</span>
                                </template>
                                <el-menu-item index="3-1" route="/home/homeschool/photolist">相册列表</el-menu-item>
                                <el-menu-item index="3-2" route="/home/homeschool/examinelist">审核列表</el-menu-item>
                                <el-menu-item index="3-3" route="/home/homeschool/examineset">审核设置</el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="4">
                                <template #title>
                                    <el-icon>
                                        <StarFilled />
                                    </el-icon>
                                    <span>评价管理</span>
                                </template>
                                <el-menu-item index="4-1" route="/home/homeschool/em">评价列表</el-menu-item>
                                <!-- <el-menu-item index="4-2" route="/home/homeschool/ea">评价权限设置</el-menu-item> -->
                            </el-sub-menu>

                            <el-menu-item index="5" route="/home/homeschool/vote">
                                <template #title>
                                    <el-icon>
                                        <Iphone />
                                    </el-icon>
                                    <span>投票管理</span>
                                </template>
                            </el-menu-item>
                            <el-menu-item index="6" route="/home/homeschool/gowork">
                                <template #title>
                                    <el-icon>
                                        <Goblet />
                                    </el-icon>
                                    <span>健康中心</span>
                                </template>
                            </el-menu-item><el-sub-menu index="7">
                                <template #title>
                                    <el-icon>
                                        <Phone />
                                    </el-icon>
                                    <span>出勤确认</span>
                                </template>
                                <el-menu-item index="7-1" route="/home/homeschool/dm">今日点名</el-menu-item>
                                <el-menu-item index="7-2" route="/home/homeschool/workcount">出勤统计</el-menu-item>
                            </el-sub-menu>

                        </el-menu>
                    </el-col>
                </div>
            </el-aside>
            <el-container>
                <el-header class="bottom_header">
                    <div class="ico">
                        <el-icon v-if="!isnull" @click="change">
                            <Fold />
                        </el-icon>
                        <el-icon v-else="isnull" @click="change">
                            <Expand />
                        </el-icon>
                    </div>
                </el-header>
                <el-main style="background-color: #f7f7f7;"><router-view></router-view></el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts" >
import { ref } from 'vue';
var isnull = ref(false)
var arr = ref(["1", "2", "3", "4", "5", "6", "7"])
const change = () => {
    isnull.value = !isnull.value
    // console.log(isnull.value);

}
</script>

<style scoped>
.bottom_header {
    background-color: #fff;
    height: 40px;
    z-index: 30;
    margin-left: -2px;
    display: flex;
    align-items: center;
}

.aside_left {
    width: auto;
    margin-top: 20px;
}

.el-sub-menu__title,
.el-menu-item {
    font-size: 12px;
    height: 30px;
}

.el-col-12 {
    max-width: none;
}

::-webkit-scrollbar {
    display: none;

}
</style>